<template>
    <div class="alert" v-show="show">
        <dialog
        class="dialog_alert"
        :show='show'
        :mask-transition="maskTransition"
        :dialog-transition="dialogTransition"
        @on-hide="$emit('on-hide')"
        @on-show="$emit('on-show')">
            <div class="dialog_hd">
                <strong class="dialog_title">{{title}}</strong>
            </div>
            <div class="dialog_bd">
                <slot></slot>
            </div>
            <div class="dialog_ft">
                <a href="javascript:;" class="btn btn-primary" @click="onHide">{{buttonText}}</a>
            </div>
        </dialog>
    </div>
</template>
<style>
.dialog_alert{
    position: fixed;
    z-index: 888;
    background: rgba(0, 0, 0, 0.6);
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}
</style>
<script>
export default {
    components: {
        "dialog" : require("./dialog.vue")
    },
    props: {
        show: {
            type: Boolean,
            default: false
        },
        title: String,
        buttonText: {
            type: String,
            default: "ok"
        },
        maskTransition: {
            type: String,
            default: 'fade'
        },
        dialogTransition: {
            type: String,
            default: 'dialog'
        }
    },
    methods: {
      onHide () {
        this.show = false;
        this.onHideEvent()
      },
      onHideEvent(){
        
      }
    }
}
</script>